<template>
  <div>
    <div class="returnUpPage"><nuxt-link :to="{name:'course-id',params:{id:courseId}}">返回</nuxt-link></div>
    <div class="videoTotal">
        <div class="videoTitle">{{courseInfoPageVo.title}}</div>
        <div class="videoKnobble">
            <div>
                <!-- 阿里云视频播放器样式 -->
                <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.1/skins/default/aliplayer-min.css" >
                <!-- 阿里云视频播放器脚本 -->
                <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.8.1/aliplayer-min.js" />
                <!-- 定义播放器dom -->
                <div id="J_prismPlayer" class="prism-player my-style" />
            </div>
            <div class="knobble">
                <ol class="chapter" v-for="chapter in chapterVoList" :key="chapter.id">{{chapter.title}}
                    <li v-for="knobble in chapter.children" :key="knobble.id" :class="{active:knobble.videoSourceId===vid}">
                        <a href="#" @click="playVideo(knobble.videoSourceId)" style="text-decoration:none;">{{knobble.title}}</a>
                    </li>
                </ol>
            </div>
        </div>
    </div>
    
    <div>评论区</div>
  </div>
</template>
<script>
import vodApi from '@/api/vod'
import indexApi from '@/api/hot'
import courseApi from '@/api/course'
export default {
    layout:'video',
    data(){
        return {
            courseInfoPageVo:[],
            chapterVoList:[]
        }
    },
    asyncData({params,error,query}){
        return vodApi.getPlayAuth(params.vid)
            .then(res=>{
                return {
                    playAuth:res.data.data.playAuth,
                    vid:params.vid,
                    timer1:'',
                    courseId:query.courseId
                }
            })
    },
    //页面渲染后执行
    mounted () {        
        this.timer1 = setInterval(() => {
            console.log("123")
            console.log(window)
            console.log(window.Aliplayer)
        if (window.Aliplayer !== undefined){
            this.initAliplayer()
        }
        console.log("1231")
         window.clearInterval(this.timer1)
           
      }, 1000);

        
         
    },
    created () {
        //this.playVideo()
        indexApi.playVideo({})
                .then(res=>{
                    //alert(this.$route.params.vid)
                    //alert(this.courseId)
                });
        this.getOtherCourseInfo()
    },
    methods: {
        playVideo(videoSourceId){
            indexApi.playVideo({})
                .then(res=>{
                  this.$router.push({ name:'player-vid',params:{vid:videoSourceId},query:{courseId:this.courseId} })
                })
        },
        //获取其他小节信息
        getOtherCourseInfo(){
            courseApi.getCourseInfoForeground(this.courseId)
            .then(res=>{
                this.courseInfoPageVo=res.data.data.courseInfoPageVo,
                this.chapterVoList=res.data.data.chapterVoList
                //console.log(this.courseInfoPageVo)
                //console.log(this.chapterVoList)
            })
        },
        initAliplayer(){
            new Aliplayer({
            id: 'J_prismPlayer',
            vid: this.vid, // 视频id
            playauth: this.playAuth, // 播放凭证
            encryptType: '1', // 如果播放加密视频，则需设置encryptType=1，非加密视频无需设置此项
            //width: '80%',
            //height: '500px',
            // 以下可选设置
            cover: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fyouimg1.c-ctrip.com%2Ftarget%2Ftg%2F156%2F770%2F707%2Ff09f9c4b6335478ebb76c1309a49126d.jpg&refer=http%3A%2F%2Fyouimg1.c-ctrip.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1619769962&t=4569b67917786c8cf0dd23827160848b', // 封面
            qualitySort: 'asc', // 清晰度排序
            mediaType: 'video', // 返回音频还是视频
            autoplay: false, // 自动播放
            isLive: false, // 直播
            rePlay: false, // 循环播放
            preload: true,
            controlBarVisibility: 'hover', // 控制条的显示方式：鼠标悬停
            useH5Prism: true, // 播放器类型：html5
        }, function(player) {
            console.log('播放器创建成功')
        })
        }
    }
}
</script>
<style>
.active{
    padding: 5px;
    background: rgb(196, 240, 152);
    border-radius: 5px;
}
.returnUpPage{
    position: absolute;
    font-size:20px;
    right: 10vw;
    background: rgb(150, 102, 240);
    width: 80px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 10px;
}
.videoTotal{
    width: 120vh;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}
.my-style{
    width: 80vh !important;
    height: 60vh !important;
    margin: 0 auto;
    margin-top: 20px;
}
.videoTitle{
    text-indent: 5px;
    margin-top: 60px;
    font-size: 30px;
    width: 80vh;
}
.videoKnobble{
    display: flex;
}
.knobble{
    overflow:auto;
    margin-left: 10px;
    margin-top: 20px;
    font-size: 20px;
    width: 100%;
    background: rgb(197, 223, 245);
    box-shadow: 10px 10px 5px aquamarine;;
    height: 60vh;
}
.knobble::-webkit-scrollbar{
        width: 12px;
    }
.knobble::-webkit-scrollbar-thumb{
        background: linear-gradient(#9dee8b,#53f12f);
        border-radius: 6px;
    }
.knobble::-webkit-scrollbar-thumb:hover{
        background: linear-gradient(transparent,#00c6ff);
    }
.chapter{
    margin: 10px;
    border-bottom: solid 1px darkslategrey;
}
.chapter li{
    margin: 10px;
}
</style>